<template>
  <div class="answer_box">
    <div class="btn" v-if="!isReady">
      <el-button type="danger" plain @click="start" v-if="!isStart"
        >立即开始</el-button
      >
      <div v-else>
        <h3>本次答题共有{{ total }}题 恭喜你答对了{{ num }}道 ！</h3>
        <el-button @click="findOutMore">查看详情</el-button>
      </div>
    </div>
    <div class="answer" v-else>
      <el-form :model="form" :rules="rules" ref="form" label-width="auto">
        <!-- 单选 -->
        <div v-if="radioData">
          <div v-for="(item, index) in radioData" :key="'radio-' + index">
            <el-form-item :label="item.text" :prop="`resource${index}`">
              <el-radio-group v-model="form[`resource${index}`]">
                <el-radio
                  v-for="(value, vIndex) in item.answers"
                  :key="'radio-value-' + vIndex"
                  :label="value.id"
                >
                  {{ value.text }}
                  <el-tag
                    type="success"
                    v-if="value.is_correct && isFindOutMore"
                    >正确</el-tag
                  >
                  <el-tag type="error" v-if="!value.is_correct && isFindOutMore"
                    >错误</el-tag
                  >
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>

        <!-- 多选 -->
        <div v-if="checkboxData">
          <div v-for="(item, index) in checkboxData" :key="'checkbox-' + index">
            <el-form-item :label="item.text" :prop="`type${index}`">
              <el-checkbox-group v-model="form[`type${index}`]">
                <el-checkbox
                  v-for="(value, vIndex) in item.answers"
                  :key="'radio-value-' + vIndex"
                  :label="value.id"
                >
                  {{ value.text }}
                  <el-tag
                    type="success"
                    v-if="value.is_correct && isFindOutMore"
                    >正确</el-tag
                  >
                  <el-tag type="error" v-if="!value.is_correct && isFindOutMore"
                    >错误</el-tag
                  >
                </el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-button type="primary" plain @click="onSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
import {
  getRandomQuestions, // 获取题目
} from "../api/answerManagement.js";
import { ElMessage } from "element-plus";

export default {
  data() {
    return {
      isReady: false,
      isStart: false,
      isFindOutMore: false,
      form: {},
      rules: {},
      radioData: [],
      checkboxData: [],
      total: 0, //总题数
      num: 0, //答对题数
      checkboxAllRight: [], //全部多选正确答案
    };
  },
  created() {
    this.start();
  },
  methods: {
    start() {
      this.getList();
      this.isReady = true;
    },

    // 获取数据
    getList() {
      getRandomQuestions()
        .then((res) => {
          res.forEach((item) => {
            this.total++;
            if (item.question_type == 1 || item.question_type == 3) {
              this.radioData.push(item);
            } else if (item.question_type == 2) {
              this.checkboxData.push(item);
            }
          });
          this.form = this.initForm();
          this.rules = this.initRules();
          this.checkboxData.forEach((element) => {
            const arr = [];
            element.answers.forEach((element) => {
              if (element.is_correct) {
                arr.push(element.id);
              }
            });
            this.checkboxAllRight.push(arr);
          });
        })
        .catch((error) => {
          ElMessage.error(error);
        });
    },

    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.num = 0;
          const values = Object.values(this.form); // 获取对象值的数组

          if (this.radioData.length != 0) {
            values.forEach((radioNum) => {
              this.radioData.forEach((item) => {
                item.answers.forEach((element) => {
                  if (element.id == radioNum) {
                    if (element.is_correct) {
                      return this.num++;
                    }
                  }
                });
              });
            });
          }
          if (this.checkboxData.length != 0) {
            values.forEach((value) => {
              this.checkboxAllRight.forEach((checkboxList) => {
                if (this.areArraysEqual(value, checkboxList)) {
                  this.num++;
                }
              });
            });
          }

          this.isStart = true;
          this.isReady = false;
        } else {
        }
      });
    },

    // 多选数组判断
    areArraysEqual(arr1, arr2) {
      if (arr1.length !== arr2.length) {
        return false;
      }
      arr1.sort();
      arr2.sort();
      for (let i = 0; i < arr1.length; i++) {
        if (arr1[i] !== arr2[i]) {
          return false;
        }
      }
      return true;
    },

    initForm() {
      let form = {};
      this.radioData.forEach((item, index) => {
        form[`resource${index}`] = "";
      });
      this.checkboxData.forEach((item, index) => {
        form[`type${index}`] = [];
      });
      return form;
    },

    initRules() {
      let rules = {};
      this.radioData.forEach((item, index) => {
        rules[`resource${index}`] = [
          { required: true, message: "此项为必选项", trigger: "change" },
        ];
      });
      this.checkboxData.forEach((item, index) => {
        rules[`type${index}`] = [
          {
            type: "array",
            required: true,
            message: "此项为必选项",
            trigger: "change",
          },
        ];
      });
      console.log(rules);
      return rules;
    },

    // 了解更多
    findOutMore() {
      this.isReady = !this.isReady;
      this.isFindOutMore = true;
    },
  },
};
</script>

<style lang="less" scoped>
.answer_box {
  width: 100%;
  height: 100vh;
  background: url(../assets/bg.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-flow: column nowrap;

  .btn {
    width: 60%;
    height: 98%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 1px 5px #464646;
    border-radius: 10px;
    margin: auto;
    position: relative;

    .el-button,
    h3 {
      position: absolute;
      top: 45%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 20px;
      height: 60px;
    }

    .el-button {
      top: 55%;
    }
  }

  .answer {
    position: relative;
    width: 60%;
    height: 98%;
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 1px 5px #464646;
    border-radius: 10px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto; /* 添加垂直滚动条 */
    padding-bottom: 60px;

    .el-form-item {
      flex-direction: column;
    }
    /deep/.el-form-item__label {
      width: calc(60vw - 20px) !important;
      height: auto;
      margin-bottom: 5px;
      justify-content: flex-start;
    }

    .el-button {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    /* 隐藏滚动条 */
    ::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    -ms-overflow-style: none; /* IE 11 */
    scrollbar-width: none; /* Firefox 64 */
  }
  .el-radio-group {
    align-items: flex-start;
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 0;
    flex-direction: column;
  }

  .el-checkbox-group {
    display: flex;
    font-size: 0;
    line-height: 0;
    flex-direction: column;
  }
}
</style>
